<template>
  <div class="shipment-wrapper  full-height">
    <p class="shipment-number"><span class="bold">Shipment#:</span> {{shipmentNumber}}</p>
    <section class="section-title">
      <h3>Shippment Edit</h3>
    </section>
    <section class="table-size">
      <div class="table-size-cnt">
        Table size
        <Radio-group v-model="tableSize" type="button">
          <Radio label="large">large</Radio>
          <Radio label="default">medium(default)</Radio>
          <Radio label="small">small</Radio>
        </Radio-group>
      </div>
    </section>
    <section class="data-list">
      <Table border no-data-text :size="tableSize" :loading="tableDataloading" ref="waitToConfirm" :columns="tableColumns" :data="shipmentDetailData" v-if="shipmentDetailData.length"></Table>
      <div v-show="notableDataTip">
        <Alert type="warning" class="no-data-alter">
          A warning prompt
          <template slot="desc">
            No data for wait to ship!!
          </template>
        </Alert>
      </div>
    </section>
    <ShipmentForm :shipmentList="shipmentList" :shipmentForm="shipmentForm"  :shipAction="shipAction"></ShipmentForm>
  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex';
  import ShipmentForm from '@/components/ShipmentForm.vue';
  import { shipmentDetail } from '@/api/index';
  export default {
    name: 'EditShipment',
    components: { ShipmentForm },
    data () {
      return {
        shipAction: 'edit',
        shipmentNumber: '',
        tableDataloading: true,
        notableDataTip: false,
        tableSize: 'default',
        confirmBtnDisable: true,
        shipmentList: [],
        shipmentForm: {
          fullfillment: '',
          supplierCourier: '',
          dispatchDate: '',
          ETA: '',
          tracking: '',
          shippingFee: '$0',
          invoice: '',
          invoiceDate: '',
          invoiceAttachment: [],
          notes: ''
        },
        shipmentDetailData: [],
        tableColumns: [
          {
            title: 'Tag',
            align: 'center',
            width: 90,
            fixed: 'left',
            key: 'tag'
          },
          {
            title: 'UPC',
            align: 'center',
            minWidth: 125,
            fixed: 'left',
            key: 'UPC'
          },
          {
            title: 'From PO',
            align: 'center',
            minWidth: 150,
            key: 'from_PO'
          },
          {
            title: 'Category',
            align: 'center',
            width: 160,
            key: 'category'
          },
          {
            title: 'Brand',
            align: 'center',
            minWidth: 130,
            key: 'brand'
          },
          {
            title: 'Product Code',
            width: 85,
            align: 'center',
            key: 'product_code'
          },
          {
            title: 'Product Name',
            minWidth: 185,
            key: 'product_name'
          },
          {
            title: 'Colour Code',
            width: 80,
            align: 'center',
            key: 'colour_code'
          },
          {
            title: 'Size',
            width: 65,
            align: 'center',
            key: 'size'
          },
          {
            title: 'Order QTY',
            width: 70,
            align: 'center',
            key: 'order_QTY'
          },
          {
            title: 'Exp. QTY',
            width: 70,
            align: 'center',
            key: 'Exp_QTY'
          },
          {
            title: 'Unit Price',
            align: 'center',
            width:110,
            key: 'unit_price'
          },
          {
            title: 'Discount',
            align: 'center',
            width:110,
            key: 'discount'
          },
          {
            title: 'Special Discount',
            align: 'center',
            minWidth:150,
            key: 'special_discount'
          },
          {
            title: 'Net Price',
            width: 90,
            align: 'center',
            key: 'net_price'
          },
          {
            title: 'Total Price',
            width: 100,
            align: 'center',
            key: 'total_price'
          }
        ]
      }
    },
    computed:{},
    created () {

      this.shipmentNumber = decodeURI(this.$route.query.shipment);
      console.log(this.$route.query.shipment)
      this.initData();
    },
    methods: {
      initData () {
        shipmentDetail().then(res => {
          this.$Loading.start();
          let resObj = res.data;
          if (!!resObj) {
            this.$Loading.finish();
            this.tableDataloading = false;
            this.shipmentList =  resObj.data.shiped_items;
            this.shipmentForm = resObj.data.invoice_detail;
            this.shipmentForm.invoiceAttachment = [];
            let shipmentListLen = this.shipmentList.length;
            if (shipmentListLen > 0) {

              this.tableDataloading = false;
              this.shipmentDetailData = this.shipmentList;
              let orderQTY = 0, ExpQTY = 0, netPrice = 0, totalPrice = 0;
              let priceCurrencyUnit = this.shipmentList[0].net_price.replace(/[!(^0-9)]/ig, '');
              let alreadyHasTotalObj = this.shipmentList.some(function (item) {
                return item.tag == 'Total';
              });
              if (alreadyHasTotalObj) {
                return;
              }
              this.shipmentList.forEach(item => {
                let orderQTYValue = parseInt(item.order_QTY), ExpQTYValue = parseInt(item.Exp_QTY);
                let netPriceValue = parseFloat(item.net_price.replace(priceCurrencyUnit, ''));
                let totalPriceValue = parseFloat(item.total_price.replace(priceCurrencyUnit, ''));
                orderQTY += orderQTYValue;
                ExpQTY += ExpQTYValue;
                netPrice += netPriceValue;
                totalPrice += totalPriceValue;
              });
              let totalObj = {
                tag: 'Total',
                order_QTY: orderQTY,
                Exp_QTY: ExpQTY,
                net_price: priceCurrencyUnit + netPrice,
                total_price: priceCurrencyUnit + totalPrice
              }
              this.shipmentDetailData[shipmentListLen] = totalObj;
            } else {

              this.notableDataTip = true;
            }
          } else {
            this.$Loading.error();
            this.notableDataTip = true;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .full-height {
    min-height: 100% !important;
  }
  .shipment-number {
    padding-bottom: 15px;
    text-align: left;
    border-bottom: 1px solid #e9eaec;
    .bold {
      font-weight: bold;
    }
  }
</style>
